<template>
  <div class="view">
    <x-header :left-options="{backText: '', preventGoBack: true}" class="vux-1px-b">
      邀请好友
      <a slot="right" @click="onShare()">
        <b>分享</b>
      </a>
    </x-header>
    <div class="erweima">
      <div class="qrdiv">
        <qrcode :value="value" :fg-color="'#000000'" :size="100"></qrcode>
        <p style="line-height: initial; font-size: small;">
          <label>{{secretMobile}}</label>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Qrcode, XHeader } from 'vux'
import { mapState } from 'vuex'
import html2canvas from 'html2canvas'

export default {
  components: {
    Qrcode,
    XHeader
  },
  computed: {
    ...mapState(['user']),
    secretMobile () {
      return this.mobile.substr(0, 3) + '****' + this.mobile.substr(-4)
    }
  },
  data () {
    return {
      value: '',
      mobile: ''
    }
  },
  created () {
    this.mobile = this.user.user_name
    this.value = 'https://hxapi.axccn.cn/index.html#/regist?invitecode=' + this.user.user_name // 把需要绑定的变量，赋值给data里面声明的变量
  },
  methods: {
    /*
     * 通过canvas获取div元素图片
     * @params fun: Function 回调函数，成功回调
     */
    createImage (fun) {
      let canvasEl = document.querySelector('.erweima')
      html2canvas(canvasEl, {
        allowTaint: true,
        windowWidth: canvasEl.scrollWidth,
        windowHeight: canvasEl.scrollHeight
      }).then((canvas) => {
        fun && fun(canvas)
      })
    },
    /*
     * 微信分享
     * 将canvas元素图片转换为base64
     * 并保存为本地路径
     * 后调起微信分享
     */
    onShare () {
      if (!this.$APIIsExist) {
        this.$weChatShare({
          name: 'chat',
          params: {
            title: '百度',
            desc: '百度一下，你就知道！',
            link: 'https://hxapi.axccn.cn/index.html#/home',
            imgUrl: 'http://img.zanjl.com/content/img/default/login_car_logo.png'
          }
        })
        return
      }
      this.$vux.loading.show()
      this.createImage((imageEl) => {
        let thumb = imageEl.toDataURL('image/jpeg', 0.1)
        let contentUrl = imageEl.toDataURL('image/png')

        this.saveImage(thumb.replace('data:image/jpeg;base64,', ''), 'fs://saveImg/', 'shareQrcodeThumb.jpeg').then((url1) => {
          this.saveImage(contentUrl.replace('data:image/png;base64,', ''), 'fs://saveImg/', 'shareQrcode.png').then((url2) => {
            this.$vux.loading.hide()
            this.$weChatShare({
              name: 'image',
              params: {
                scene: 'session',
                thumb: url1,
                contentUrl: url2
              }
            })
          }).catch((err) => {
            this.$vux.loading.hide()
            this.$toastText(err.msg)
          })
        }).catch((err) => {
          this.$vux.loading.hide()
          this.$toastText(err.msg)
        })
      })
    },
    /*
     * 把base64图片保存为本地路径
     * @params url: string base64格式不带'data:image/png;base64,'前缀
     * @params path: string 手机本地文件夹路径
     * @params name: string 图片名字带格式后缀
     */
    saveImage (url, path, name) {
      let trans = api.require('trans')
      return new Promise((resolve, reject) => {
        trans.saveImage({
          base64Str: url,
          album: false,
          imgPath: path,
          imgName: name
        }, (ret, err) => {
          if (ret.status) {
            resolve(path + name)
          } else {
            reject(err)
          }
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>
@import "../../../assets/css/pub";
.view {
  .erweima {
    text-align: center;
    width: 100%;
    height: calc(100vh - 1.2266667rem);
    background: url("../../../assets/img/erweima.png") no-repeat;
    background-size: 100% 100%;
    /*background: url("http://img.zanjl.com/Content/img/image/erweima.png") round;*/
  }
  .qrdiv {
    padding-top: 80%;
  }
}</style>
